<template>
  <div class="report-wrap">
    <div class="report-title">
      <h1>{{ dateTitle }}份伙食费领报申请表</h1>
    </div>
    <div class="report-deputy-title">
      <div>
        <span>编报单位:</span>
        <span>{{ unitName }}</span>
      </div>
      <div>
        <span>伙食费地区:</span>
        <span>{{ region == 1 ? "一般地区" : "特殊地区" }}</span>
      </div>
      <div>
        <span>填报时间:</span>
        <span>{{ submitTime }}</span>
      </div>
    </div>
    <div class="report-table-content">
      <table
        border="1"
        style="border-collapse: collapse; text-align: center; width: 30%"
      >
        <thead>
          <tr>
            <th colspan="3" rowspan="3" style="width: 180px; height: 60px">
              项目
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(item, indexS) in tableOption"
            :key="indexS"
            style="height: 40px"
          >
            <td
              :colspan="items.colspan"
              :rowspan="items.rowspan"
              v-for="(items, indexA) in item"
              :key="indexA"
            >
              <span>{{ items.value }}</span>
            </td>
          </tr>
        </tbody>
      </table>
      <table
        border="1"
        style="border-collapse: collapse; width: 70%; text-align: center"
      >
        <thead>
          <tr>
            <th colspan="3" rowspan="1" style="width: 300px; height: 20px">
              义务兵和供给制学员
            </th>
            <th colspan="3" rowspan="1" style="width: 300px">
              其他享受伙食费人员
            </th>
            <th colspan="1" rowspan="3" style="width: 100px">
              申报金额合计（元）
            </th>
          </tr>
          <tr>
            <th style="width: 100px; height: 20px">标准</th>
            <th style="width: 100px">实力</th>
            <th colspan="1" rowspan="2" style="width: 100px">金额(元)</th>
            <th style="width: 100px">标准</th>
            <th style="width: 100px">实力</th>
            <th colspan="1" rowspan="2" style="width: 100px">金额(元)</th>
          </tr>
          <tr>
            <th colspan="1" rowspan="3" style="width: 100px; height: 20px">
              (元/天)
            </th>
            <th colspan="1" style="width: 100px">(人天)</th>
            <th colspan="1" rowspan="3" style="width: 100px">(元/天)</th>
            <th colspan="1" style="width: 100px">(人天)</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(items, indexs) in dataOption" :key="indexs">
            <td>
              <div class="tableInput">
                <Input-number
                  v-model="items.volunteerAndSupplyStandard"
                  :precision="2"
                  readonly
                  class="inputNumberWidth"
                ></Input-number>
              </div>
            </td>
            <td>
              <div class="tableInput">
                <Input-number
                  v-model="items.volunteerAndSupplyStrength"
                  class="inputNumberWidth"
                  readonly
                ></Input-number>
              </div>
            </td>
            <td style="height: 40px">
              <span>{{
                (
                  (
                    items.volunteerAndSupplyStandard *
                    items.volunteerAndSupplyStrength
                  ).toFixed(2) + ""
                ).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
              }}</span>
            </td>
            <td>
              <div class="tableInput">
                <Input-number
                  v-model="items.otherPersonnelEnjoyingMealStandard"
                  class="inputNumberWidth"
                  :precision="2"
                  readonly
                ></Input-number>
              </div>
            </td>
            <td>
              <div class="tableInput">
                <Input-number
                  v-model="items.otherPersonnelEnjoyingMealStrength"
                  class="inputNumberWidth"
                  readonly
                ></Input-number>
              </div>
            </td>
            <td style="height: 40px">
              <span>{{
                (
                  (
                    items.otherPersonnelEnjoyingMealStandard *
                    items.otherPersonnelEnjoyingMealStrength
                  ).toFixed(2) + ""
                ).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
              }}</span>
            </td>
            <td style="height: 40px">
              <span>{{
                (
                  (
                    items.volunteerAndSupplyStandard *
                      items.volunteerAndSupplyStrength +
                    items.otherPersonnelEnjoyingMealStandard *
                      items.otherPersonnelEnjoyingMealStrength
                  ).toFixed(2) + ""
                ).replace(/\B(?=(\d{3})+(?!\d))/g, ",")
              }}</span>
            </td>
          </tr>
          <tr style="height: 41px">
            <td colspan="6" rowspan="1" style="height: 41px"></td>
            <td>
              <div class="tableInput">
                <span class="totalAmount" style="height: 41px">{{
                  totleAmount
                }}</span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="report-table-footer">
      <Form v-model="auditForm" :label-width="120">
        <FormItem label="账务部位复核:">
          <Input v-model="auditForm.financeDepartmentReviewer" clearable maxlength="20" />
        </FormItem>
        <FormItem label="军需部门审核:">
          <Input v-model="auditForm.militarySuppliesDepartmentReviewer" clearable maxlength="20" />
        </FormItem>
        <FormItem label="基层单位领导:">
          <Input v-model="auditForm.basicLevelLeaderShip" clearable maxlength="20" />
        </FormItem>
        <FormItem label="司务长:">
          <Input v-model="auditForm.messOfficer" clearable maxlength="20" />
        </FormItem>
        <FormItem label="填制:">
          <Input v-model="auditForm.informant" clearable maxlength="20" />
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import { getMonthlyMealsApplyDetail } from "@/api/businessAccountingApi/essentialInformationApi";
export default {
  props: {
    concatOption: {
      type: Array,
      default: () => {
        return [
          { canEdit: true, value: 0, key: "selfStandard" },
          { canEdit: true, value: 2, key: "selfNum" },
          { canEdit: false, key: "self" },
          { canEdit: true, value: 2, key: "otherStandard" },
          { canEdit: true, value: 3, key: "selfNum" },
          { canEdit: false, key: "other" },
          { canEdit: false },
        ];
      },
    },
  },
  data() {
    return {
      dataOption: [],
      tableOption: [
        [
          { value: "基本伙食费", colspan: 1, rowspan: 3 },
          { value: "一类灶", colspan: 2, rowspan: 1 },
        ],
        [{ value: "二类灶", colspan: 2, rowspan: 1 }],
        [{ value: "三类灶", colspan: 2, rowspan: 1 }],
        [
          { value: "任务专项伙食费", colspan: 1, rowspan: 9 },
          { value: "重大任务(一、二类灶)", colspan: 2, rowspan: 1 },
        ],
        [{ value: "一般任务一类灶", colspan: 2, rowspan: 1 }],
        [{ value: "军委、战区联指值班", colspan: 2, rowspan: 1 }],
        [{ value: "火箭军密闭训练", colspan: 2, rowspan: 1 }],
        [
          {
            value: "舰艇(船)赴国(境)外执行任务需筹措补给",
            colspan: 2,
            rowspan: 1,
          },
        ],
        [{ value: "舰艇护航", colspan: 2, rowspan: 1 }],
        [{ value: "远望船执行远洋测控", colspan: 2, rowspan: 1 }],
        [{ value: "边境巡逻(当天返回)", colspan: 2, rowspan: 1 }],
        [{ value: "边境巡逻(当天不返回)", colspan: 2, rowspan: 1 }],
        [
          { value: "地区专项伙食费", colspan: 1, rowspan: 9 },
          { value: "海拔4500米以上(一类灶)", colspan: 2, rowspan: 1 },
        ],
        [{ value: "海拔4500米以上(二类灶)", colspan: 2, rowspan: 1 }],
        [{ value: "海拔4500米以上(三类灶)", colspan: 2, rowspan: 1 }],
        [{ value: "西沙群岛(一类灶)", colspan: 2, rowspan: 1 }],
        [{ value: "西沙群岛(二类灶)", colspan: 2, rowspan: 1 }],
        [{ value: "西沙群岛(三类灶)", colspan: 2, rowspan: 1 }],
        [{ value: "南沙岛礁人员", colspan: 2, rowspan: 1 }],
        [{ value: "南沙值班舰艇", colspan: 2, rowspan: 1 }],
        [{ value: "吉布提基地", colspan: 2, rowspan: 1 }],
        [
          { value: "人员专项伙食费", colspan: 1, rowspan: 9 },
          { value: "一线边防连队和海岛分队", colspan: 2, rowspan: 1 },
        ],
        [{ value: "核材料运输、技务、守护分队", colspan: 2, rowspan: 1 }],
        [{ value: "驻核试验区分队和参试人员", colspan: 2, rowspan: 1 }],
        [{ value: "核潜艇修理人员", colspan: 2, rowspan: 1 }],
        [{ value: "20人以下独立起伙人员", colspan: 2, rowspan: 1 }],
        [{ value: "飞行日进场保障机务人员", colspan: 2, rowspan: 1 }],
        [{ value: "空降兵部队跳伞人员", colspan: 2, rowspan: 1 }],
        [{ value: "核潜艇艇员", colspan: 2, rowspan: 1 }],
        [{ value: "航空母舰舰员", colspan: 2, rowspan: 1 }],
        [
          { value: "人员专项伙食费", colspan: 1, rowspan: 5 },
          { value: "航空母舰飞行员和潜水员", colspan: 2, rowspan: 1 },
        ],
        [{ value: "航天员", colspan: 2, rowspan: 1 }],
        [{ value: "运动员、教练员、试训运动员", colspan: 2, rowspan: 1 }],
        [{ value: "疗养员", colspan: 2, rowspan: 1 }],
        [{ value: "伤病员", colspan: 2, rowspan: 1 }],
        [
          { value: "夜餐费", colspan: 1, rowspan: 2 },
          { value: "固定夜餐岗位", colspan: 2, rowspan: 1 },
        ],
        [{ value: "任务夜餐费", colspan: 2, rowspan: 1 }],
        [
          { value: "高原临时来队", colspan: 1, rowspan: 2 },
          { value: "临时来队人员加菜就餐", colspan: 2, rowspan: 1 },
        ],
        [{ value: "临时来队人员食堂就餐", colspan: 2, rowspan: 1 }],
        [
          { value: "客饭费", colspan: 1, rowspan: 2 },
          { colspan: 2, rowspan: 1 },
        ],
        [{ colspan: 2, rowspan: 1 }],
        [{ value: "过    节    费", colspan: 3, rowspan: 1 }],
        [{ value: "新兵入伍途中伙食补助", colspan: 3, rowspan: 1 }],
        [{ value: "其      他", colspan: 3, rowspan: 1 }],
        [
          { value: "退伙", colspan: 1, rowspan: 9 },
          { value: "义务兵、供给制学员", colspan: 1, rowspan: 3 },
          { value: "一类灶" },
        ],
        [{ value: "二类灶" }],
        [{ value: "三类灶" }],
        [{ value: "同餐人员", colspan: 1, rowspan: 3 }, { value: "一类灶" }],
        [{ value: "二类灶" }],
        [{ value: "三类灶" }],
        [{ value: "伤病员", colspan: 1, rowspan: 2 }, { value: "义务兵" }],
        [{ value: "其他人员" }],
        [{ value: "航天员", colspan: 2, rowspan: 1 }],
        [{ value: "合   计", colspan: 3, rowspan: 1 }],
      ],
      auditForm: {},
      region: "",
      unitName: "",
      dateTitle: "",
      totleAmount: 0,
      submitTime: "",
    };
  },
  mounted() {},
  methods: {
  
    getMonthlyMealsApplyDetail(data) {
      getMonthlyMealsApplyDetail({
        localId: data.localId, //账簿id
        unitCode: data.unitCode,
      }).then((res) => {
        if (res.code == 1) {
          console.log(res,'bug1');
          this.dateTitle = new Date(res.data.applyYearMonth).Format(
            "yyyy年MM月"
          );
          this.dataOption = res.data.standardEntities;
          this.auditForm.financeDepartmentReviewer =
            res.data.financeDepartmentReviewer;
          this.auditForm.militarySuppliesDepartmentReviewer =
            res.data.militarySuppliesDepartmentReviewer;
          this.auditForm.basicLevelLeaderShip = res.data.basicLevelLeaderShip;
          this.auditForm.messOfficer = res.data.messOfficer;
          this.auditForm.informant = res.data.informant;
          this.region = res.data.region;
          this.unitName = res.data.unitName;
          this.submitTime = new Date(res.data.submitTime).Format("yyyy-MM-dd");
          this.totleAmount = this.getTotal(res.data.standardEntities);
          this.tableOption[39][1].value = res.data.cateringFieldOne;
          this.tableOption[40][0].value = res.data.cateringFieldTwo;
        }
      });
    },
    show(data) {
      this.getMonthlyMealsApplyDetail(data);
    },
    getTotal(listData) {
      let totleAmount;
      totleAmount = listData.reduce(function (prev, cur, index, listData) {
        return (
          prev +
          (cur.volunteerAndSupplyStandard * cur.volunteerAndSupplyStrength +
            cur.otherPersonnelEnjoyingMealStandard *
              cur.otherPersonnelEnjoyingMealStrength)
        );
      }, 0);
      return (totleAmount.toFixed(2) + "").replace(
        /\B(?=(\d{3})+(?!\d))/g,
        ","
      );
    },
  },
};
</script>
<style lang="less" scoped>
@import "../index.less";
</style>
